<template>
  <div class='container'>
    <el-dialog title="预览文章" :visible="previewArticleDialog" @close="closeDialog" width="52%">
      <div>
        <h2 v-html="articlePre.title"></h2>
        <span> {{articlePre.createTime | parseTimeByString}} &nbsp;&nbsp; {{articlePre.username}}</span>&nbsp;&nbsp;
        <i class="el-icon-view"></i>&nbsp;&nbsp;
        <span> {{articlePre.visits}} </span>
      </div>

      <div v-html="articlePre.articleBody" class="contentBox"></div>

    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    previewArticleDialog: {
      type: Boolean,
      required: true
    },
    articlePre: {
      type: Object,
      required: true
    }
  },
  methods: {
    closeDialog () {
      this.$emit('update:previewArticleDialog', false)
    }
  }

}
</script>

<style scoped lang='less'>
.contentBox{
border: 1px dashed #ccc;
background-color: #f5f5f5;
margin-top: 20px;
padding: 10px;
width: 750px;
}
</style>
